<template>
	<view class="message-container">
	  <view class="system-message">
		<view class="notification">
		  <img src="../static/通知.png" alt="icon" class="icon"/>
		  <view class="notification-content">
			<text class="title">系统消息</text>
			<text class="subtitle">你的拐杖今日状态良好</text>
			</view>
			<text class="time">5月31日 14:57</text>
		  
		</view>
	  </view>
	  <view class="message-list">
		<view class="message-item" v-for="(message, index) in messages" :key="index">
		  <view class="avatar">
			<image :src="message.avatar" alt="头像" />
		  </view>
		  <view class="message-details">
			<text class="name">{{ message.name }}</text>
			<text class="time">{{ message.time }}</text>
			<text class="content">{{ message.content }}</text>
		  </view>
		</view>
	  </view>
	</view>
  </template>
  
  <script>
  export default {
	  data() {
		  return {
			  messages: [
				  { name: '联系人名称1', time: '12:21', content: '摘要信息', avatar: '../static/avatar.png' },
				  { name: '联系人名称2', time: '12:21', content: '摘要信息', avatar: '../static/avatar.png' },
				  { name: '联系人名称3', time: '12:21', content: '摘要信息', avatar: '../static/avatar.png' },
				  { name: '联系人名称4', time: '12:21', content: '摘要信息', avatar: '../static/avatar.png' },
				  { name: '联系人名称5', time: '12:21', content: '摘要信息', avatar: '../static/avatar.png' },
				  { name: '联系人名称6', time: '12:21', content: '摘要信息', avatar: '../static/avatar.png' },
			  ],
		  };
	  },
  };
  </script>
  
  <style scoped>
  .message-container {
	padding: 10px;
  }
  .system-message {
	background-color: #f9f9f9;
	padding: 10px;
	border-radius: 5px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	margin-bottom: 10px;
	display: flex;
	align-items: center;
  }
  .notification {
	display: flex;
	align-items: center;
	margin: 10px;
  }
  
  .notification-content {
	flex: 1;
	display: flex;
	flex-direction: column; /* 垂直排列 */
	align-items: flex-start; /* 左对齐 */
  }
  .title {
	font-size: 16px;
	font-weight: bold;
  }
  .subtitle {
	font-size: 14px;
	color: #555;
  }
  .time {
	font-size: 12px;
	color: #999;
	margin-left: auto;
  }
  .message-list {
	margin-top: 10px;
  }
  .message-item {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
	border-bottom: 1px solid #e0e0e0;
	padding: 10px 0;
  }
  .icon{
	  height: 30px;
	  width: 30px;
	  padding: 15px;
  }
  .avatar image {
	width: 40px;
	height: 40px;
	border-radius: 50%;
  }
  .message-details {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-left: 10px;
  }
  .name {
	font-weight: bold;
	color: #333;
  }
  .content {
	color: #555;
  }
  .time {
	color: gray;
	font-size: 12px;
  }
  </style>